﻿<!DOCTYPE html>
<html xmlns:v-for="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        .logo-list li {
            padding: 8px;
        }

        .logo-list li:hover {
            background-color: #f3f3f3;
        }

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li><a href="#">手机</a></li>
                    <li><span>手机通讯</span></li>
                </ul>
                <!--已选择过滤项-->
                <ul class="tags-choose">
                    <li class="tag">
                        品牌:<span style="color: red">apple</span>
                        <i class="sui-icon icon-tb-close"></i>
                    </li>
                    <li class="tag">
                        内存:<span style="color: red">4G</span>
                        <i class="sui-icon icon-tb-close"></i>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <div class="type-wrap" v-for="(filter,index) in filters" :key="index" v-if="filter.k != '品牌'" v-show="index < 5 || show">
                    <div class="fl key">{{filter.k}}</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li  v-for="(o,i) in filter.options" :key="i" @click="selectFilter(filter.k,o)" >
                                <a>{{o.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="flext"></div>
                </div>
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">{{filter.k}}</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li v-for="(o,j) in filter.options" :key="j" v-if="o.image" @click="selectFilter(filter.k,o)" :title="o.name"><img :src="o.image"/></li>
                            <li style="text-align: center" v-else @click="selectFilter(filter.k,o)"><a style="line-height: 30px; font-size: 12px" href="#">{{o.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>
                <!--<div class="type-wrap">-->
                <!--<div class="fl key">网络制式</div>-->
                <!--<div class="fl value">-->
                <!--<ul class="type-list">-->
                <!--<li>-->
                <!--<a>GSM（移动/联通2G）</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>电信2G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>电信3G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>移动3G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>联通3G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>联通4G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>电信3G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>移动3G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>联通3G</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>联通4G</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<div class="fl ext"></div>-->
                <!--</div>-->
                <!--<div class="type-wrap">-->
                <!--<div class="fl key">显示屏尺寸</div>-->
                <!--<div class="fl value">-->
                <!--<ul class="type-list">-->
                <!--<li>-->
                <!--<a>4.0-4.9英寸</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>4.0-4.9英寸</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<div class="fl ext"></div>-->
                <!--</div>-->
                <!--<div class="type-wrap">-->
                <!--<div class="fl key">摄像头像素</div>-->
                <!--<div class="fl value">-->
                <!--<ul class="type-list">-->
                <!--<li>-->
                <!--<a>1200万以上</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>800-1199万</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>1200-1599万</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>1600万以上</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>无摄像头</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<div class="fl ext"></div>-->
                <!--</div>-->
                <!--<div class="type-wrap">-->
                <!--<div class="fl key">价格</div>-->
                <!--<div class="fl value">-->
                <!--<ul class="type-list">-->
                <!--<li>-->
                <!--<a>0-500元</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>500-1000元</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>1000-1500元</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>1500-2000元</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>2000-3000元 </a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a>3000元以上</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<div class="fl ext">-->
                <!--</div>-->
                <!--</div>-->
                <div class="type-wrap" style="text-align: center">
                    <v-btn small flat v-show="!show" @click="show =true">
                        更多
                        <v-icon>arrow_drop_down</v-icon>
                    </v-btn>
                    <v-btn small="" flat v-show="show" @click="show =false">
                        收起
                        <v-icon>arrow_drop_up</v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li class="active">
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <li>
                                <a href="#">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <li>
                                <a href="#">价格</a>
                            </li>
                        </ul>
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                            <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                            <a class="btn-arrow" href="#" style="display: inline-block" @click="prev()">&lt;</a>
                            <a class="btn-arrow" href="#" style="display: inline-block" @click="next()">&gt;</a>
                        </div>
                    </div>
                </div>
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <a :href="'item/'+ goods.id +'.html'" target="_blank"><img :src="goods.selected.image" height="200" /></a>
                                    <ul class="skus" v-for="sku in goods.skus" :key="sku.id">
                                        <li @mouseOver="goods.selected = sku"
                                            :class="{selected:sku.id == goods.selected.id}"><img :src="sku.image" ></li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>{{ly.formatPrice(goods.selected.price)}}</i>
                                    </strong>
                                </div>
                                <div class="attr">
                                    <em>{{goods.selected.title.length >24 ? goods.selected.title.substring(0, 24)
                                        :goods.selected.title}}</em>
                                </div>
                                <div class="cu">
                                    <em><span>促</span>{{goods.subTitle.length > 17 ? goods.subTitle.substring(0, 17)
                                        :goods.subTitle}}</em>
                                </div>
                                <div class="commit">
                                    <i class="command">已有2000人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                </div>
                            </div>
                        </li>
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                    </ul>
                </div>
                <div class="fr">
                    <div class="sui-pagination pagination-xlarge">
                        <ul>
                            <li class="prev" :class="{disabled: search.page == 1}" @click="prev()">
                                <a href="#">«上一页</a>
                            </li>
                            <li class="dotted" v-show="isShow"
                                v-if="search.page - 2 > 1 ? isShow = true : isShow = false"><span>...</span></li>
                            <li @click="search.page = index(i)" :class="{active: index(i) == search.page}"
                                v-for="i in Math.min(5,totalPage)">
                                <a href="#">{{index(i)}}</a>
                            </li>

                            <li class="dotted"><span>...</span></li>

                            <li class="next" :class="{disabled: search.page == totalPage}" @click="next()">
                                <a href="#">下一页»</a>
                            </li>
                        </ul>
                        <div><span>共{{totalPage}}页&nbsp;</span><span>
      到第
      <input type="text" class="page-num">
      页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
                    </div>
                </div>
            </div>
            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                shang
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search: {
                key: "",
                page: 1,
                filter:{} //保存过滤条件
            },
            goodsList: [], // 接收搜索得到的结果
            total: 0, // 总条数
            totalPage: 0, // 总页数
            selected: {},//图片的选中属性
            filters: [],
            isShow: false ,//是否显示上一页前面的 ...
            show:false //更多和收起按钮
        },
        components: {
            lyTop: () => import("./js/pages/top.js")
        },
        methods: {
            searchFromServer() {
                ly.http.post("/search/page", this.search)
                    .then(({data}) => {

                        data.items.forEach(goods => {
                            goods.skus = JSON.parse(goods.skus),
                                goods.selected = goods.skus[0]; //给goods添加新的属性selected
                        });
                        this.goodsList = data.items;
                        this.filters.push({
                            "k": "分类",
                            options: data.categories,

                        }),
                            this.filters.push({
                                "k": "品牌",
                                options: data.brands,

                            }),
                            this.total = data.total;
                        this.totalPage = data.totalPage;
                        data.paramList.forEach(param => {
                            const options = param.options.map(o => ({name: o}))
                            this.filters.push({
                                k: param.k,
                                options: options
                            });
                            // param.options = param.options.map(o => ({name: o}));
                            // this.filters.push(param)
                        })
                    })

            },
            index(i) {
                //计算出当前页面 并且根据当前页码渲染前面和后面的页码
                if (this.search.page <= 3) {
                    return i;
                } else if (this.search.page > this.totalPage - 3) {
                    return this.totalPage - 5 + i;
                } else {
                    return this.search.page - 3 + i;
                }

            },
            //上一页
            prev() {
                if (this.search.page > 1) {
                    this.search.page--;
                }
            },
            //下一页
            next() {
                if (this.search.page < this.totalPage) {
                    this.search.page++;
                }
            },
            //选择的过滤条件
            selectFilter(k, o) {
                const obj = {}; //定义一个对象
                Object.assign(obj,this.search.filter) //把filter的属性值赋给obj
                if (k == "品牌" || k == "分类") { //如果点击的是品牌或者分类  就把id值封装到search的filter里面传到后台查询
                    obj[k] = o.id; //给他扩展属性
                } else {
                    obj[k] = o.name;//给他扩展属性 如果点击的规格参数  就直接把规格参数的名传递到后台进行查询
                }
                this.search.filter = obj; //如果之前有值  就会在此基础上继续扩展
                //把该点击的所在分类给隐藏
            }
        },
        created() {
            // 判断是否有请求参数
            //location.search会有地址栏所有的东西
            if (!location.search) {
                return;
            }
            // 将请求参数转为对象
            const search = ly.parse(location.search.substring(1));
            //如果原先地址栏就有page  就进行转换
            search.page = parseInt(search.page) || 1; //给search模型添加一个page属性
            search.filter = search.filter || {};
            // 记录在data的search对象中
            this.search = search;

            // 发起请求，根据条件搜索
            this.searchFromServer();

        },
        watch: {
            search: {
                deep: true,
                handler(newVal, oldVal) {
                    if (!oldVal || !oldVal.key) {
                        return;
                    }
                    location.href = "http://www.leyou.com/search.html?" + ly.stringify(this.search);
                }
            }
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>